<template>
  <el-row class="min-h-screen bg-indigo-500">
    <el-col :span="16" class="flex items-center justify-center">
        <div>
            <div class="font-bold text-5xl text-light-50 mb-4">欢迎光临</div>
            <div class="text-gray-200 text-sm">交通运输人员就业与再就业教育培训平台</div>
        </div>
    </el-col>
    <el-col :span="8" class="bg-light-50 flex items-center justify-center flex-col">
        <h2 class="font-bold text-3xl text-gray-800 ">欢迎注册</h2>
        <el-steps :active="active" finish-status="success" class="w-[250px]">
            <el-step title="基本信息"/>
            <el-step title="设置密码"/>
            <el-step title="完成"/>
        </el-steps>
        <div v-if="active === 0">
            <el-form :model="form" class="w-[250px]" :rules="rules" ref="formRef">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" clearable />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone" clearable />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="form.sex" clearable>
                        <el-option v-for="item in sexlist" :key="item.id" :label="item.name" :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期" prop="date">
                    <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
                </el-form-item>
            </el-form>
        </div>
        <div v-if="active === 1">
            <el-form :model="passform" class="w-[250px]" :rules="passrules" ref="passformRef">
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="passform.password" show-password clearable/>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                    <el-input type="password" v-model="passform.password2" show-password clearable/>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="active === 2">
            <el-result
                icon="success"
                title="注册成功"
                sub-title="请返回登录"
            >
                <template #extra>
                    <el-button type="primary" @click="$router.push('/stuLogin')">返回登录</el-button>
                </template>
            </el-result>
        </div>
        <el-row class="justify-center py-5">
            <el-button type="primary" @click="previous" v-if="active === 1">上一步</el-button>
            <el-button type="primary" @click="next" v-if="active === 0||active === 1">下一步</el-button>
        </el-row>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref,reactive } from 'vue';
import { ElMessage } from 'element-plus';
import axios from '../../axios';
const active = ref(0);
const form = reactive({
    name:'',
    phone:'',
    sex:'',
    birthday:'',
})
const passform = reactive({
    password:'',
    password2:'',
})
const formRef = ref(null);
const passformRef = ref(null);
const sexlist = reactive([{id:1,name:'男'},{id:2,name:'女'}])
// 验证规则
const rules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}],
    sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur' }],
})
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } else {
        const reg = /^.{6,16}$/;
        if(!reg.test(value)){
            callback(new Error('请输入6-16位密码'));
        }else{
            callback();
        }
    }
};
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请确认密码'));
    } else {
        if(passform.password !== value){
            callback(new Error('两次密码不一致'));
        }else{
            callback();
        }

    }
};
const passrules = reactive({
    password: [{ required: true, message: '请输入密码', trigger: 'blur' },{validator: validatePass, trigger: 'blur'}],
    password2: [{ required: true, message: '请确认密码', trigger: 'blur' },{validator: validatePass2, trigger: 'blur'}],
})
const previous = () => {
    active.value--;
}
const next = () => {
    if(active.value === 0){
        formRef.value.validate((valid) => {
            if(valid){
                active.value++;
            }
        })
    }else if(active.value === 1){
        passformRef.value.validate((valid) => {
            if(valid){
                const account = {
                    username:form.phone,
                    password:passform.password,
                }
                axios.post('/students/add',form).then(res => {
                    if(res.data.code === 1){
                        axios.post('/studentAccount/add',account).then(res => {
                            if(res.data.code === 1){
                                active.value++;
                            }
                        })
                    }else{
                        ElMessage.error(res.data.msg);
                    }
                })

            }
        })
    }else if(active.value === 2){
        active.value = 0;
    }
}

</script>

<style>

</style>